<template>
  <div class="category">
    <div class="header-box">
      <div class="header-box--title">
        <i class="el-icon-s-fold" @click="handleHidden"></i>公司列表
      </div>
      <el-input
        v-model="formInline.companyNameLike"
        placeholder="输入公司名称"
        v-debounce="searchData"
      ></el-input>
      <!-- @input="searchData" -->
    </div>
    <el-scrollbar tag="ul" class="list" ref="listDom" v-loading="loading">
      <li
        v-for="item in list"
        :key="item.id"
        :class="{ active: item.id === active?.id }"
        @click="changeActive(item)"
      >
        <span>{{ item.companyName }}</span>
      </li>
      <!-- </ul> -->
    </el-scrollbar>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, inject, reactive } from "vue";
import { injectKeyCompany } from "./context";
import { postSysCompanyList } from "/@/api/organization";
import { useUserStoreHook } from "/@/store/modules/user";

export default defineComponent({
  setup() {
    const formInline = reactive({
      pageNum: 1,
      pageSize: 500,
      companyNameLike: ""
    });
    let list = ref([]);
    let loading = ref(true);
    let active: any = ref(inject(injectKeyCompany));
    const userHook = useUserStoreHook();

    const getCategoryData = async (obj: object = {}) => {
      loading.value = true;
      try {
        const { code, data } = await postSysCompanyList(obj);
        if (code === 200) {
          list.value = data.list;
        } else {
          list.value = [];
        }
        list.value.unshift({ id: 0, companyName: "全部" });
      } catch (err) {
        console.log(err);
      } finally {
        loading.value = false;
      }
    };
    // const searchData = debounce(300, getCategoryData);
    const searchData = () => {
      getCategoryData(formInline);
    };

    const changeActive = (row: any) => {
      active.value = row;
    };

    active.value = { id: 0, companyName: "全部" };

    const handleHidden = () => {
      userHook.isHiddenSetting();
    };

    getCategoryData(formInline);

    return {
      formInline,
      loading,
      list,
      active,
      searchData,
      changeActive,
      handleHidden
    };
  }
});
</script>

<style lang="scss" scoped>
.category {
  background: #fff;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  border: 1px solid #e4e7ed;
  margin-right: 5px;
  .header-box {
    padding: 10px;
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    align-items: center;
    user-select: none;
    &--title {
      padding: 0;
      margin: 0;
      margin-right: 10px;
      font-size: 14px;
      color: #303133;
      font-weight: 500;
      display: -webkit-box;
      -webkit-line-clamp: 1;
      -webkit-box-orient: vertical;
      overflow: hidden;
      height: 30px;
      line-height: 30px;
      i {
        font-size: 16px;
        margin-right: 8px;
        cursor: pointer;
        &:hover {
          color: #409eff;
        }
      }
    }
    .el-input {
      flex: 1;
    }
    .el-button {
      margin-left: 10px;
    }
  }
  .list {
    flex: 1;
    // height: auto;
    margin: 0;
    padding: 0;
    display: block;
    user-select: none;
    li {
      height: 38px;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      padding-left: 20px;
      width: 100%;
      box-sizing: border-box;
      cursor: pointer;
      transition: 0.2s;
      border-top: 1px solid #eee;
      // border-bottom: 1px solid #eee;
      // & + li {
      // }
      &:hover {
        background: #e0ebf6;
      }
      &.active {
        background: rgba(186, 220, 255, 0.4);
        color: #409eff;
      }
      span {
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        overflow: hidden;
        font-size: 14px;
      }
    }
    .load-tip {
      font-size: 14px;
      color: #616161;
    }
  }
}
</style>
